<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
    margin: 0;
    padding: 0;
    list-style: none;
}
.head {
    width: 250px;
	border: 0px solid #ccc;
	border-bottom: none;
	font-size: 12px;
    margin: 0 auto;
}

.head dt {
    height: 34px;
    background: pink;
    cursor: pointer;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: bold;
    padding-left: 20px;
    border-bottom: 1px solid #ecdfcc;
    color: #000;
}

.head dd a{
    /* 高度为0时就溢出所有的内容，并且隐藏 */
    overflow: hidden;
    height: 0;
    display: block;
    line-height: 30px;
    padding-left: 30px;
    background: pink;
    transition:all .7s ease 0s;
}
.head dd a:hover{
	color: #fff;
    background-color: #f6699f   
}
    </style>

</head>
<body style="background-color: black;">
    <dl class="head">
        <dt>语言</dt>
        <dd class="acc0">
            <a>Java</a>
            <a>javascript</a>
            <a>python</a>
        </dd>

        <dt>运动</dt>
        <dd  class="acc1">
            <a>足球</a>
            <a>羽毛球</a>
            <a>篮球</a>
        </dd>
        
        <dt>乐器</dt>
        <dd  class="acc2">
            <a>钢琴</a>
            <a>手风琴</a>
        </dd>
        
        <dt>男装</dt>
        <dd  class="acc3">
            <a>T恤</a>
            <a>皮衣夹</a>
            <a>西服套装</a>
        </dd>        
        <dt>配饰</dt>
        <dd  class="acc4">
            <a>女士围巾</a>
            <a>大衣毛衣</a>
        </dd>
    </dl>
    <script>
        var dts = document.querySelectorAll('dt');
        var das = document.querySelectorAll('a');
        for (let i = 0; i < dts.length; i++) {
            dts[i].onclick = function () {
            var aas = document.querySelector(`.acc${i}`).querySelectorAll('a'); // 点击哪个标题p获取那个标题下面的所有li
                for (let k = 0; k < das.length; k++) { // 在增加高度前 清除之前的所有高度 排他思想
                    das[k].style.height = '0px';
                }
                for (let j = 0; j < aas.length; j++) { // 给获取的所有的li增加高度
                        aas[j].style.height = '34px';
                }  
            }
        }
    </script>
</body>
</html>